<template>
	<view class="swiper-wrap">
		<swiper class="swiper" ref="swiper" :autoplay="autoplay" :circular="circular" :interval="interval"
			:duration="duration" @change="changeSwiper">
			<block v-for="(item, index) in urls" :key="index">
				<swiper-item @tap="previewSwiperItem(index)">
					<view v-if="item['type'] === 'video'" class="video-wrap">
						<j-video width="750rpx" height="750rpx" :url="item.url" :poster="videoCover" />
					</view>

					<u-image :width="imagesWidth" :height="imagesHeight" :src="item.url" mode="scaleToFill" />
				</swiper-item>
			</block>
		</swiper>

		<view class="dots black sm bg-white br60" v-if="pagenum">{{ currentSwiperIndex + 1 }}/{{ urls.length || 0 }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentSwiperIndex: 0,
				showPlay: true,
				showControls: false,
				autoplay: true,
				videoContext: null,
			};
		},

		props: {
			// 图片链接列表
			images: {
				type: Array,
				default: () => [],
			},

			// 视频链接
			video: {
				type: [String, Boolean],
				default: false,
			},

			// 视频封面
			videoCover: {
				type: [String, Boolean],
				default: false,
			},

			// 衔接滑动，即播放到末尾后重新回到开头
			circular: {
				type: Boolean,
				default: true,
			},
			pagenum: {
				type: Boolean,
				default: true,
			},
			
			

			// 自动切换时间间隔
			interval: {
				type: Number,
				default: 3 * 1000,
			},

			// 滑动动画时长
			duration: {
				type: Number,
				default: 500,
			},
			imagesWidth: {
				type: [Number, String],
				default: '750'
			},
			imagesHeight: {
				type: [Number, String],
				default: '750'
			},
		},

		computed: {
			urls() {
				const images = this.images.map((item) => ({
					url: item,
					type: "image"
				}));

				return this.video ? [{
					url: this.video,
					type: "video"
				}, ...images] : images;
			},
		},

		mounted() {
			this.videoContext = uni.createVideoContext("video", this);
		},

		methods: {
			// 切换Swiper项
			changeSwiper(e) {
				this.currentSwiperIndex = e.detail.current;
			},

			// 视频异常
			videoErrorCallback(err) {
				throw new Error(err);
			},

			// 查看Swiper项
			previewSwiperItem(current) {
				const type = this.urls[current].type;

				// #ifdef MP-WEIXIN
				wx.previewMedia({
					current,
					sources: this.urls,
				});
				//#endif

				// #ifndef MP-WEIXIN
				const index = this.video ? current - 1 : current;
				type === "video" ?
					this.videoContext.requestFullScreen() :
					uni.previewImage({
						index,
						urls: this.images
					});
				//#endif
			},

			// 视频播放
			playVideo() {
				// this.videoContext.play()
			},

			// 当视频进入和退出全屏时触发
			fullscreenchange(e) {
				const {
					fullScreen
				} = e.detail;
				this.showPlay = !fullScreen;
				this.showControls = !!fullScreen;
				console.log(fullScreen);
				!!fullScreen && this.videoContext.play();
				!fullScreen && this.videoContext.pause();
			},
		},
	};
</script>

<style scoped>
	.swiper-wrap {
		width: 100%;
		height: 750rpx;
		position: relative;
	}

	.swiper-wrap .swiper {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.swiper-wrap .swiper .slide-image {
		width: 100%;
		height: 100%;
	}

	.swiper-wrap .dots {
		position: absolute;
		right: 24rpx;
		bottom: 24rpx;
		display: flex;
		height: 34rpx;
		padding: 0 15rpx;
	}

	.swiper-wrap .video-wrap {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
	}

	.swiper-wrap .video {
		width: 100%;
		height: 100%;
	}

	.swiper-wrap .icon-play {
		width: 90rpx;
		height: 90rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}
</style>
